<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        input {
            width: 200px;
            height: 50px;
            font-size: 20px;
            outline: none;
            line-height: 50px;
        }

        button {
            width: 70px;
            height: 50px;
            font-size: 20px;
        }
    </style>
    <!-- 
        长度11,开头1,全是数字,不符合则提示输入有误,正确则把手机号中间四位换成****
     -->
</head>

<body>
    <input type="text" name="phoneNumber" id="phoneNumber" placeholder="请输入手机号">
    <button>提交</button>
</body>
<script>
    document.querySelector('button').onclick = function () {
        let phoneNumber = document.getElementById('phoneNumber').value;
        if (checkPhoneNumber(phoneNumber)) {
            document.getElementById('phoneNumber').value = phoneNumberPlus(phoneNumber);
        } else {
            alert('输入有误！请重新输入！');
            document.getElementById('phoneNumber').value = '';
        }
    }

    function phoneNumberPlus(phoneNumber) {
        let str = '';
        for (let i = 0; i < phoneNumber.length; i++) {
            if (i >= 3 && i <= 6) {
                str += '*';
            } else {
                str += phoneNumber[i];
            }
        }
        return str;
    }

    function checkPhoneNumber(phoneNumber) {
        let flag = false;
        let len = phoneNumber.length;
        if (len != 11) {
            flag = false;
        } else {
            if (phoneNumber[0] != 1) {

                flag = false;
            } else {
                let count = 0;
                for (let j = 1; j < len; j++) {
                    if (phoneNumber[j] >= 0 && phoneNumber[j] <= 9) {
                        count++;
                    }
                }
                if (count == 10) {
                    flag = true;
                }
            }
        }
        return flag;
    }
</script>

</html>